<template>
    <Form ref="formItem" :model="formItem" :label-width="100" :rules="ruleValidate">
        <FormItem label="学期"  prop="semester_id">
            <Select v-model="formItem.semester_id" >
                <Option v-for="item in semesterList" :value="item.semester_id" :key="item.dictionary_id">{{ item.semester_name.zh? item.semester_name.zh: item.semester_name.mn }}</Option>
            </Select>
        </FormItem>
        <FormItem label="年级"  prop="grade_id">
            <Select v-model="formItem.grade_id" @on-change="eclass">
                <Option v-for="item in gradeList" :value="item.id" :key="item.id">{{ item.grade_name.zh? item.grade_name.zh: item.grade_name.mn }}</Option>
            </Select>
        </FormItem>
        <FormItem label="班级" prop="eclass_id" >
            <div style="border-bottom: 1px solid #e9e9e9;margin-left:6px;padding-bottom:6px;">
                <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="CheckAll">全选</Checkbox>
            </div>
            <CheckboxGroup v-model="allclass" @on-change="checkAllGroup" v-if="classList.length">
                <Checkbox v-for="item in classList" :label="item.eclass_id" :key="item.eclass_id">{{item.eclass_name.zh?item.eclass_name.zh:item.eclass_name.mn}}</Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem label="请假标题" prop="title.zh">
            <Input v-model="formItem.title.zh" placeholder="请输入请假标题"></Input>
        </FormItem>
        <FormItem label="请假开始日期" prop="start_time">
            <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" v-model="formItem.start_time"  placeholder="请假开始日期" style="width:100%"></DatePicker>
        </FormItem>
        <FormItem label="请假结束日期" prop="end_time">
            <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" v-model="formItem.end_time" placeholder="请假结束日期" style="width:100%"></DatePicker>
        </FormItem>
        <FormItem label="请假内容">
            <Input v-model="formItem.content.zh" type="textarea" :autosize="{minRows: 2,maxRows: 4}" placeholder="请输入请假内容"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="submit('formItem')" :loading="btnload">{{infoId?'修改':'添加'}}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props: {
        infoId:Number, 
    },
    data () {
        return {
            semesterList:[],
            gradeList:[],
            classList:[],
            allclass:[],
            indeterminate: true,
            checkAll: false,
            formItem: {                    
                semester_id:null,
                grade_id:null,
                eclass_id:[],
                title:{
                    zh:'',
                    mn:'',
                    en:'',
                },
                start_time:this.$util.dateTime(),
                end_time:'', 
                content:{
                    zh:'',
                    mn:'',
                    en:'',
                },
            },
            btnload:false,
            addUrl:'api/leave/v1/organization_leave/edit',
            editUrl:'api/leave/v1/organization_leave/getone/',
            updateUrl:'api/leave/v1/organization_leave/update/',
            ruleValidate: {
                'title.zh': [
                    { required: true, message: '请假标题不得为空', trigger: 'blur' }
                ],
                semester_id: [
                    { required: true, type: 'number', message: '请选择学期', trigger: 'change' }
                ],
                grade_id: [
                    { required: true, type: 'number', message: '请选择年级', trigger: 'change' }
                ],
                eclass_id: [
                    { required: true, type: 'array',  min: 1, message: '请选择班级', trigger: 'change' }
                ],
                start_time: [
                    { required: true, type: 'date', message: '请选择请假开始日期', trigger: 'change' }
                ],
                end_time: [
                    { required: true, type: 'date', message: '请选择请假结束日期', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        /************************************************************
         * 获取学期
         ************************************************************/
        semester(){
            this.$http.get('api/semester/v1/semester/semesterlists').then(val=>{ 
                this.semesterList=val.data  
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
            })
        },
        /************************************************************
         * 获取年级
         ************************************************************/
        grade(){
            this.$http.get('api/base/v1/get/grade/list').then(val=>{ 
                this.gradeList=val.data     
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
            })
        },
        /************************************************************
         * 获取班级
         ************************************************************/
        eclass(obj){
            if(obj!=null){
                this.$http.get(`api/eclass/v1/eclass/grade_eclass?grade_id=${obj}`).then(val=>{ 
                    this.classList=val.data 
                    this.allclass=val.data  
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                })
            }
        },
        /************************************************************
         * 全选
         ************************************************************/
        CheckAll () {         
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
                this.allclass = this.classList.map(el => {
                    return el.eclass_id
                })   
                this.formItem.eclass_id = this.allclass         
            } else {
                this.allclass = [];
            }
        },
        /************************************************************
         * 选择Checkbox
         ************************************************************/
        checkAllGroup (data) {   
            this.formItem.eclass_id = []
            data.forEach(item=>{
                if(item.eclass_id ==undefined){
                    this.formItem.eclass_id.push(item)
                }else{
                    this.formItem.eclass_id = []
                }
            })
            if (data.length === this.allclass.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        },
        /************************************************************
         * 提交
         ************************************************************/
        submit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.btnload = true
                    if (this.infoId!=null) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('验证失败');
                    this.btnload = false 
                }
            })
        },
        
        /************************************************************
         * 执行添加数据
         ************************************************************/
        addSubmit () {
            this.$http.post(this.addUrl,this.formItem).then(val=>{
                this.$Message.success(val.message);
                this.$emit('requery',true)            
                this.btnload = false
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 执行修改数据
         ************************************************************/
        editSubmit () {
            this.$http.put(`${this.updateUrl+this.infoId}`,this.formItem).then(val=>{
                this.$Message.success(val.message);
                this.$emit('requery',true)  
                this.btnload = false   
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 单条数据查询（修改）
         ************************************************************/
        infodata(){
            this.$http.get(`${this.editUrl+this.infoId}`).then(val=>{ 
                let infoOld = JSON.parse(JSON.stringify(val.data)) 
                this.formItem = {
                    semester_id : parseInt(infoOld.semester_id),
                    grade_id : infoOld.grade.id,
                    start_time : infoOld.start_time,
                    end_time : infoOld.end_time,
                    title: infoOld.title,
                    content : infoOld.content
                }
                this.eclass(this.formItem.grade_id)
                setTimeout(() => {
                    this.allclass = []  
                    infoOld.eclass.forEach(item=>{
                        this.allclass.push(item.eclass_id)
                    }) 
                    this.formItem.eclass_id = this.allclass 
                }, 2000);
                this.checkAll = true
            }).catch(err => {
            })
        },
    },
    created () {
        this.semester()
        this.grade()
        if (this.infoId!=null){            
            this.infodata ()
        }   
    },
}
</script>